<template>
  <view>
    <uni-card title="介绍人" :is-shadow="true">
      <uni-list>
        <uni-list>
          <uni-list-item :title="upCustomerName" thumb-size="lg"></uni-list-item>
        </uni-list>
      </uni-list>
    </uni-card>
    <uni-card title="被介绍人" :is-shadow="true" :extra="total" note="true">
      <uni-list>
        <template v-for="(item,index) in list">
          <uni-list-item :thumb="item.customerSex==1?'/static/CRM/boy.png':'/static/CRM/girl.png'" :title="item.customerName" :note="item.customerPhone" thumb-size="lg">
            <template slot="footer">
              <uni-icons @tap="del(item)" style="opacity:0.8;" type="minus-filled" size="24" color="#ED7467"></uni-icons>
            </template>
          </uni-list-item>
        </template>
      </uni-list>
      <template v-slot:footer>
        <view class="footer-box" @tap="add()">
          <uni-icons type="plus-filled" size="36" color="#ED7467"></uni-icons>
        </view>
      </template>
    </uni-card>
  </view>

</template>
<script>
let id = null
export default {
  data() {
    return {
      list: [],
      total: null,
      upCustomerName: ''
    }
  },
  onLoad(e) {
    id = e.id
    this.upCustomerName = e.upCustomerName
    this.getDatas()
  },
  onShow() {
    const _this = this
    uni.getStorage({
      key: 'user_key',
      success: function (res) {
        console.log(res);
        uni.removeStorage({ key: 'user_key' });
        _this.$post('/sale/wx/customer_down/add_data', { customerId: id, downCustomer: res.data.id }, true).then(res => {
          if (res.code * 1 === 200) {
            uni.showToast({
              icon: "none",
              title: "新增成功",
              position: "bottom"
            })
            _this.getDatas(false)
          }
        })
      }
    });
  },
  methods: {
    getDatas(bool = true) {
      let _this = this
      _this.$post('/sale/wx/customer_down/get_datas', { id: id }, bool).then(res => {
        if (res.code * 1 === 200) {
          _this.list = res.data.row
          _this.total = res.data.total
        }
      })
    },
    add() {
      uni.navigateTo({
        url: '/pages/common/userList'
      });
    },
    del(e) {
      const _this = this
      uni.showModal({
        title: '警告',
        content: '本次操作将要该绑定关系',
        success: function (res) {
          if (res.confirm) {
            _this.$post('/sale/wx/customer_down/delete_data', { id: e.relationId }, true).then(res => {
              if (res.code * 1 === 200) {
                _this.getDatas()
                uni.showToast({
                  icon: "none",
                  title: "删除成功",
                  position: "bottom"
                })
              }
            })
          } else if (res.cancel) {
          }
        }
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.footer-box {
  text-align: right;
}
</style>